<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 准备好容器 -->
    <div id="test">

    </div>
</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="js/react.development.js" type="text/javascript"></script>
<script src="js/react-dom.development.js" type="text/javascript"></script>

<script src="js/babel.min.js" type="text/javascript"></script>


<!--这里使用了babel用来解析jsx语法-->
<script type="text/babel">
    /*
    总结: 
    1.类中的构造器不是必须写的,要对实例进行一些初始化操作,如添加指定属性的时候才写
    2.如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的
    3.类中所定义的方法,都是放在了类的原型对象上,共实例去使用
    */
    //创建一个Person类
    class Person {
        //构造器方法 结束传参
        constructor(name, age) {
            //构造器中的this是谁? --类的实例对象
            this.name = name
            this.age = age
        }
        speak() {
            //speck方法放在了哪里?--类的原型对象上,供实例使用
            //通过Person实例调用speck时, speak中的this就是Person实例(看谁调用) call更改this指向
            console.log(`我叫${this.name},我的年龄是${this.age}`)
        }
    }

    //创建一个Person的实例对象
    const p1 = new Person('tom', 18)
    const p2 = new Person('jack', 19)

    console.log(p1);
    console.log(p2);
    p1.speak()
    p2.speak()

    //继承
    //创建一个Student类,继承于Person类  extends(继承)
    class Student extends Person {
        //构造器
        constructor(name, age, grade) {//独有的东西 年级
            super(name, age)//查找父类的构造  原型链上查找
            this.grade = grade
        }
        speak() {
            console.log(`我叫${this.name},我的年龄是${this.age}`,`我读${this.grade}年级`)
        }
        study(){
            console.log('我努力学习')
        }
    }
    const s1 = new Student('小张', 15, '高一')
    console.log(s1)
    s1.speak()

</script>

</html>